<template>
	<view>
		<PageHead backPath="/pages/user/index?p=3"></PageHead>
		<view class="margin-30">
			<Acard bgFilter>
				<template>
					<ul>
						<li>
							<text class="nbg width-per-30">社团名</text>
							<text class="nbg width-per-70">{{ societyInfo.title }}</text>
						</li>
						<li>
							<text class="nbg width-per-40">社团人数</text>
							<text class="nbg width-per-70">{{ societyInfo.total }}</text>
						</li>
						<li>
							<text class="nbg width-per-40">创建日期</text>
							<text class="nbg width-per-70">
								{{ $u.timeFormat(societyInfo.creationTime, 'yyyy年mm月dd日') }}
							</text>
						</li>
						<li>
							<text class="nbg width-per-40">活动数</text>
							<text class="nbg width-per-70">{{ societyInfo.activity_count }}</text>
						</li>
						<li>
							<text class="nbg width-per-40">文章数</text>
							<text class="nbg width-per-70">{{ societyInfo.article_count }}</text>
						</li>
					</ul>
				</template>
			</Acard>
			<Acard pad="8px" class="mt-15" @click.native="quitConfirm = true">
				<view class="fs-center">退出社团</view>
			</Acard>
		</view>
		<u-modal
			:show="quitConfirm"
			@confirm="quitSociety"
			content="确定要退出社团？"
			showCancelButton
			:asyncClose="true"
			@cancel="quitConfirm = false"
		></u-modal>
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'MySpciety',
	data() {
		return {
			quitConfirm: false
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('society', ['societyInfo'])
	},
	mounted() {
		this.getSocietyInfo();
	},
	methods: {
		getSocietyInfo() {
			this.$store.dispatch('society/getSocietyInfo', this.userinfo.society_id);
		},
		async quitSociety() {
			let code = await this.$store.dispatch('society/quitSociety', this.userinfo.id);
			if (code === 200) {
				await this.$store.dispatch('user/getUserInfo', this.userinfo.id);
				uni.redirectTo({
					url: '/pages/user/index?p=3'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
ul li {
	display: flex;
	flex-flow: nowrap row;
	align-items: center;
	font-family: 'Oxanium-Regular', 'Microsoft YaHei', 'PingFang SC';
	margin-bottom: 10px;

	&:last-child {
		margin-bottom: 0;
	}

	&:before {
		margin-right: 20rpx;
		width: 6px;
		height: 20px;
		background: #9bd2bd;
		border-radius: 3px;
		box-shadow: 0 0 10px rgb(155, 210, 189);
		animation: FpulseSlowB infinite alternate 1s linear;
		content: '';
	}

	.nbg {
		background: rgba(26, 26, 26, 0.5);
		overflow: hidden;
		clip-path: polygon(
			6px 0px,
			calc(100% - 6px) 0,
			100% 6px,
			100% calc(100% - 6px),
			calc(100% - 6px) 100%,
			6px 100%,
			0 calc(100% - 6px),
			0 6px
		);
		// height: 32px;
		box-sizing: border-box;
		padding: 5px 16px;
		margin-right: 6px;
	}
}
</style>
